<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登陆页面</title>
    <script th:src="@{/js/vue.min.js}"></script>
    <script th:src="@{/js/jquery.js}"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" th:href="@{/css/login.css}">
</head>
<body>
<div id="app">
    <div id="box">
        <el-form label-position="right" label-width="70px">
            <el-form-item class="imgBox">
                <el-image th:src="@{/img/logo.png}" class="img"></el-image>
            </el-form-item>
            <el-form-item label="账号:">
                <el-input class="input" v-model="input.username" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item label="密码:">
                <el-input class="input" v-model="input.password" placeholder="请输入密码" show-password></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onLogin">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>
</body>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            input: {
                username:'',
                password:''
            }
        },
        methods: {
            onLogin(){
                if (this.input.username == ''){
                    this.$message("请输入同户名！")
                }else if (this.input.password == '') {
                    this.$message("请输入密码")
                }else {
                    console.log(this.input.username, this.input.password);
                    $.ajax({
                        url: "/login?username="+this.input.username+"&password="+this.input.password,
                        type: "POST",
                        success: function (res){
                            console.log(res);
                            if (res == '用户名或者密码错误！'){
                                app.$message("用户名或者密码错误！");
                            }
                        },
                        error: function (res){
                            if (res.status == 404) {
                                app.$message("不能连接到服务器！");
                            }
                        }
                    })
                }
            }
        }
    })
</script>
</html>